<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入element-ui样式 -->
    <link rel="stylesheet" href="../../../plugins/element-ui/index.css">
    <style>
        .box2{
            /*position: absolute;*/
            width: 100%;
            height: 180px;
            margin-top: 0px;
            margin-left: 0px;
        }
        .box3{
            position: absolute;
            width: 500px;
            height: 450px;
            /*background-color: red;*/
            margin: -500px 510px 0;
        }
        .box3  h1:nth-child(1){
            color: white;
            font-size: 80px;
            text-align: center;
            font-family: 'beyond_the_mountainsregular', sans-serif;
        }
    </style>

    <!--    上传图片样式-->
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">

    <!--背景图大蒙板-->

    <div class="box2" style="">
        <el-menu
                class="el-menu-demo"
                mode="horizontal"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1"  @click="url(1)">主页</el-menu-item>
            <el-submenu index="2">
                <template slot="title">菜品信息</template>
                <el-menu-item index="2-1" @click="changeFlavor('全部')">全部</el-menu-item>

                <el-row :span="8" v-for="item in options1" :key="o" :offset="index > 0 ? 2 : 0">
                    <el-menu-item @click="changeFlavor(item)">{{item.flavorType}}</el-menu-item>
                </el-row>

            </el-submenu>
            <el-menu-item index="3"  @click="url(3)">个人购物车</el-menu-item>
            <el-menu-item index="4"  @click="url(4)">个人订单</el-menu-item>
            <el-menu-item  index="6" @click="url(6)">个人订单详情</el-menu-item>
            <el-submenu style="margin: 0 0 0 800px" index="5">
                <template slot="title">
                    {{userInfo.data.username}}
                </template>
                <el-menu-item index="5-1"  @click="url(5)">退出登录</el-menu-item>
            </el-submenu>
        </el-menu>
    </div>

    <div style="margin: -180px 0 0 0; background: #000;">
        <img style="opacity:0.6; filter: alpha(opacity=60); width: 100%;height: 800px" src="../../img/hero_bg_2.jpg"/>
    </div>

    <div class="box3">
        <h1>{{bigTitle}}</h1>
    </div>

    <!--分类-->
    <div style="width: 100%;height: 2000px;background-color: whitesmoke">

        <div style="width: 1400px;height: 5px;background-color: #8c939d;margin: 60px 0 0 40px"></div>
        <h1 style="margin: 10px 0 0 680px">{{bigTitle}}</h1>


        <div style="margin:120px 0 0px 0;width: 1200px;height: 1000px;margin-left: 180px">
            <el-row>
                <el-col :span="8" v-for="item in options2" :key="o" :offset="index > 0 ? 2 : 0">
                    <div  style="overflow:hidden; margin-bottom: 20px;width: 350px;height: 350px;background-color: whitesmoke">

                        <img style="width: auto; height: 2px; border:none;cursor: pointer;"
                             :preview-src-list=" `/files/downloadFile?name=${item.image}` "
                             :src="getImage(item.image)"
                        />
                        <img style="width: 350px;height: 250px;margin-top: -20px" :src="imageUrl1" class="image">

                        <span style="font-size: 25px;margin: 5px 0 0 20px">{{item.name}}</span>
                        <div style="margin: -15px 0 0 20px"> <p style="font-size: 20px;color: red">${{item.price}}</p></div>
                        <div @click="shop(item)" style="margin: -60px 0 0 260px"><i style="font-size: 50px;" class="el-icon-shopping-cart-1"></i></div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!--4.购买弹框-->
        <el-dialog :title="title" style="height: 800px"  :visible.sync="dialog_add">
            <el-form :model="formData_add" :rules="rules" ref="formData_add" label-width="100px" class="demo-formData_add">
                <el-form-item  label="备注：" prop="remarks">
                    <el-input v-model="formData_add.remarks"></el-input>
                </el-form-item>
                <el-form-item  label="数量：" prop="number">
                    <el-input-number v-model="formData_add.number" @change="handleChange" :min="1" :max="20" label="选择数量"></el-input-number>
                </el-form-item>

                <el-form-item  label="价格：" prop="price">
                   <h1 style="margin-top: -3px"> ￥{{total}}</h1>
                </el-form-item>


                <el-form-item  label="照片：" prop="image">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>



                <el-form-item>
                    <el-button type="primary" @click="toShopCar">加入购物车</el-button>
                    <el-button @click="center">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>


</div>


<script src="../../../plugins/vue/vue.js"></script>

<!-- 引入element-ui组件库 -->
<script src="../../../plugins/element-ui/index.js"></script>

<!-- 引入axios -->
<script src="../../../plugins/axios/axios.min.js"></script>

<script>
    new Vue({
        el:'#app',    //element
        data:{

            bigTitle:"全部菜品",

            // 弹框
            formData_add:{},
            dialog_add:false,
            title:"菜品名",

            //总价
            total:"",

            //菜品类型
            options1:[{}],
            //菜品信息
            options2:[{}],



            imageUrl:""
        },
        created() {
            const userInfo = window.localStorage.getItem('user')
            console.log("userInfo1:::"+userInfo)
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo)
            }
            console.log("userInfo2:::"+userInfo)


            //所有分类查询
            axios.get("/flavors/getAllFlavor").then((res)=> {
                console.log("所有分类查询")
                console.log(res)
                this.options1=res.data.data
            })

            //封装购物车
            this.formData_add.userId=this.userInfo.data.id
            this.formData_add.userName=this.userInfo.data.name
            this.getAll();
        },
        methods:{
            url(index){
                if (index==1){
                    window.location.href='../User.html'
                }else if(index==3){
                    window.location.href='shopCar.html'
                }else if(index==4){
                    window.location.href='orders.html'
                }else if(index==5){
                    window.location.href='../../login/UserLogin.html'
                }else if(index==6){
                    window.location.href='ordersList.html'
                }
            },
            getAll(){
                axios.get("/dishs/getAll").then((res)=>{
                    this.options2=res.data.data
                    this.bigTitle="全部菜品"
                })
            },

            changeFlavor(row){
                if (row!=='全部'){
                    this.bigTitle=row.flavorType
                    parent ="?flavorType="+row.flavorType;
                    axios.get("/dishs/getByFlavorType"+parent).then((res)=>{
                        this.options2=res.data.data
                    })
                }else {
                  this.getAll()
                }
            },

            shop(row){
                console.log(row)
                this.title=row.name
                this.imageUrl = `/files/downloadFile?name=${row.image}`
                this.formData_add=row
                this.formData_add.dishId=row.id


                this.total=this.formData_add.price
                this.dialog_add=true
            },

            //改变数量
            handleChange(value){
                //初始值
                this.total=this.formData_add.price

                this.total=value*this.total

                this.formData_add.total=this.total

            },

            toShopCar(){
                this.formData_add.userId=this.userInfo.data.id

                console.log("this.formData_add:")
                console.log(this.formData_add)

                this.formData_add.id=''

                axios.post("/shopCars/addShopCar",this.formData_add).then((res)=>{
                    if (res.data.code){
                        this.$message.success(res.data.msg)
                    }else {
                        this.$message.success(res.data.msg)
                    }
                }).finally(()=>{
                    this.dialog_add=false
                })
            },



            getImage(image) {
                this.imageUrl1= `/files/downloadFile?name=${image}`
            },

            center() {
                this.dialog_add=false
                this.$message.info("取消操作")
               this.getAll()
            },
        }

    })
</script>
</body>
</html>